<template>
  <div style="width: 100%; height: 600px; border: 1px solid #ddd;">
    <vue-flow
        :nodes="nodes"
        :edges="edges"
        :fit-view="true"
        style="width: 100%; height: 100%"
    />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { VueFlow } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import { fetchApprovalProcess } from 'api/approve.js'

const processList = ref([])

// nodes 和 edges 用于 Vue Flow
const nodes = ref([])
const edges = ref([])

// 状态映射，用于节点颜色和状态文案
const statusColorMap = {
  '审批中': '#409EFF', // 蓝
  '同意': '#67C23A', // 绿
  '驳回': '#F56C6C', // 红
  '转审': '#E6A23C', // 橙
  '退回': '#909399', // 灰
  '加签': '#909399',
  '同意加签': '#67C23A',
  '办理': '#909399',
  '转交': '#909399',
  '未开始': '#909399',
  '未知': '#909399'
}

// 把 processList 转成 vueflow 需要的 nodes 和 edges
function buildFlowData(processList) {
  const _nodes = []
  const _edges = []

  const nodeWidth = 280
  const nodeHeight = 120
  const xGap = 320
  const yStart = 50

  processList.forEach((node, i) => {
    const handlersStr = node.handlers
        .map(h => `${h.userid} (${h.status}${h.isCurrent ? ', 当前审批' : ''})`)
        .join('\n')

    _nodes.push({
      id: `${i}`,
      position: { x: i * xGap, y: yStart },
      style: {
        width: nodeWidth,
        minHeight: nodeHeight,
        border: node.current ? `3px solid ${statusColorMap[node.status]}` : '1px solid #ccc',
        backgroundColor: node.current ? '#e6f7ff' : '#fff',
        padding: '10px',
        whiteSpace: 'pre-line',
        borderRadius: '6px',
        fontSize: '14px',
        boxShadow: '0 2px 6px rgba(0,0,0,0.1)'
      },
      data: {
        label: `节点类型：${node.nodeType}\n审批方式：${node.approvalType}\n状态：${node.status}\n审批人:\n${handlersStr}`
      }
    })

    // 连线：除了最后一个节点，依次连线
    if (i < processList.length - 1) {
      _edges.push({
        id: `e${i}-${i + 1}`,
        source: `${i}`,
        target: `${i + 1}`,
        animated: true,
        style: { stroke: '#409EFF' },
        type: 'smoothstep'
      })
    }
  })

  return { nodes: _nodes, edges: _edges }
}
let data = {
  "errcode": 0,
  "errmsg": "ok",
  "info": {
    "sp_no": "202507010030",
    "sp_name": "凤凰庄审批通用模板",
    "sp_status": 2,
    "template_id": "C4c5FcJ9eyx8L7dmGXBUHu6R7Efz3UppSrsKziBep",
    "apply_time": 1751360490,
    "applyer": {
      "userid": "TianQiLi",
      "partyid": "5"
    },
    "sp_record": [
      {
        "sp_status": 2,
        "approverattr": 1,
        "details": [
          {
            "approver": {
              "userid": "LongMaoLin"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "LiCaiQi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ShiQuan"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ChenXingChi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ZhengPeng"
            },
            "speech": "",
            "sp_status": 2,
            "sptime": 1751448674,
            "media_id": []
          },
          {
            "approver": {
              "userid": "TianQiLi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          }
        ]
      }
    ],
    "notifyer": [],
    "apply_data": {
      "contents": [
        {
          "control": "Text",
          "id": "Text-1749708121814",
          "title": [
            {
              "text": "类型",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "sale_order_approve",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Text",
          "id": "Text-1749727352938",
          "title": [
            {
              "text": "类型名称",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "销售订单审批",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Money",
          "id": "Money-1749708130512",
          "title": [
            {
              "text": "金额",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "new_money": "200.00",
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Textarea",
          "id": "Textarea-1749708135103",
          "title": [
            {
              "text": "备注",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "{\"销售订单单据编号\":\"XSDD202507010016\"}",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Text",
          "id": "Text-1749723357253",
          "title": [
            {
              "text": "业务主键",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "1939972597693566977",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        }
      ]
    },
    "comments": [],
    "process_list": {
      "node_list": [
        {
          "node_type": 1,
          "sp_status": 2,
          "apv_rel": 2,
          "sub_node_list": [
            {
              "userid": "LongMaoLin",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "LiCaiQi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ShiQuan",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ChenXingChi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ZhengPeng",
              "speech": "",
              "sp_yj": 2,
              "sptime": 1751448674,
              "media_ids": []
            },
            {
              "userid": "TianQiLi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            }
          ]
        }
      ]
    },
    "batch_applyer": []
  }
};
onMounted(() => {
  // 模拟请求
  fetchApprovalProcess(JSON.stringify(data)).then(res => {
    processList.value = res.data

    const { nodes: flowNodes, edges: flowEdges } = buildFlowData(processList.value)
    nodes.value = flowNodes
    edges.value = flowEdges
  })
})
</script>
